<template>
    <div>
        <div class="flex items-center justify-between mb-2 mt-3">
            <h2 class="text-lg font-semibold text-gray-800 flex items-center">
                <el-icon :class="iconClass" class="text-primary mr-2"></el-icon>
                {{ title }}
            </h2>

            <div v-if="tasks.length === 0" class="text-gray-500 text-sm">
                暂无相关任务
            </div>
        </div>

        <el-table
            v-if="tasks.length > 0"
            :data="tasks"
            border
            class="w-full transition-all"
            :header-cell-style="{
                background: '#f9fafb',
                color: '#4b5563',
                fontWeight: '500',
            }"
            :row-class-name="rowClassName"
        >
            <el-table-column
                type="selection"
                width="40"
                align="center"
            ></el-table-column>
            <el-table-column
                prop="name"
                label="项目名称"
                align="center"
                min-width="180"
            ></el-table-column>
            <el-table-column
                prop="code"
                label="项目编号"
                align="center"
                width="140"
            ></el-table-column>
            <el-table-column
                prop="type"
                label="项目类型"
                align="center"
                width="120"
            ></el-table-column>
            <el-table-column
                prop="amount"
                label="结算金额"
                align="center"
                width="140"
            ></el-table-column>
            <el-table-column
                prop="status"
                label="当前状态"
                align="center"
                width="140"
            >
                <template #default="scope">
                    <el-tag
                        :type="getStatusTagType(scope.row.status)"
                        size="small"
                    >
                        {{ scope.row.status }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="deadline"
                label="截止时间"
                align="center"
                width="120"
            ></el-table-column>

            <el-table-column
                prop="priority"
                label="优先级"
                align="center"
                width="100"
                v-if="showPriority"
            >
                <template #default="scope">
                    <el-tag
                        :type="getPriorityTagType(scope.row.priority)"
                        size="small"
                    >
                        {{ scope.row.priority }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column
                label="操作"
                align="center"
                width="350"
                v-if="showActionButtons"
            >
                <template #default="scope">
                    <div class="flex justify-center space-x-1">
                        <el-button
                            type="text"
                            size="small"
                            icon="Eye"
                            @click="$emit('view-detail', scope.row.id)"
                        >
                            详情
                        </el-button>

                        <el-button
                            type="primary"
                            size="small"
                            icon="Upload"
                            @click="$emit('submit-task', scope.row.id)"
                            v-if="
                                scope.row.status === '待提交' ||
                                scope.row.status === '审核退回'
                            "
                        >
                            提交
                        </el-button>

                        <el-button
                            type="warning"
                            size="small"
                            icon="Close"
                            @click="$emit('cancel-submit', scope.row.id)"
                            v-if="
                                scope.row.status !== '待提交' &&
                                scope.row.status !== '审核退回'
                            "
                        >
                            取消
                        </el-button>

                        <el-button
                            type="info"
                            size="small"
                            icon="ArrowLeft"
                            @click="$emit('return-task', scope.row.id)"
                            v-if="scope.row.status !== '待提交'"
                        >
                            退回
                        </el-button>

                        <el-button
                            type="success"
                            size="small"
                            icon="Files"
                            @click="$emit('group-documents', scope.row.id)"
                        >
                            组卷
                        </el-button>

                        <el-button
                            type="default"
                            size="small"
                            icon="Document"
                            @click="$emit('view-report', scope.row.id)"
                        >
                            报告
                        </el-button>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center" width="160" v-else>
                <template #default="scope">
                    <div class="flex justify-center space-x-1">
                        <el-button
                            type="success"
                            size="small"
                            icon="Files"
                            @click="$emit('group-documents', scope.row.id)"
                        >
                            组卷
                        </el-button>

                        <el-button
                            type="default"
                            size="small"
                            icon="Document"
                            @click="$emit('view-report', scope.row.id)"
                        >
                            报告
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页控件 -->
        <el-pagination
            v-if="tasks.length > 0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tasks.length"
            class="mt-4 flex justify-end"
        />
    </div>
</template>

<script setup>
import { defineProps, defineEmits, ref } from "vue";

// 接收父组件参数
const props = defineProps({
    tasks: {
        type: Array,
        default: () => [],
    },
    title: {
        type: String,
        default: "任务列表",
    },
    iconClass: {
        type: String,
        default: "el-icon-clipboard",
    },
    showActionButtons: {
        type: Boolean,
        default: true,
    },
    showPriority: {
        type: Boolean,
        default: true,
    },
});

// 暴露事件
const emit = defineEmits([
    "view-detail",
    "submit-task",
    "cancel-submit",
    "return-task",
    "group-documents",
    "view-report",
]);

// 分页状态
const currentPage = ref(1);
const pageSize = ref(10);

// 分页处理
const handleSizeChange = (val) => {
    pageSize.value = val;
    currentPage.value = 1;
};

const handleCurrentChange = (val) => {
    currentPage.value = val;
};

// 表格行样式
const rowClassName = ({ row }) => {
    return row.isUrgent ? "bg-orange-50" : "";
};

// 根据状态获取标签类型
const getStatusTagType = (status) => {
    const statusMap = {
        待提交: "info",
        待部门审核: "info",
        待公司审核: "info",
        部门审核中: "warning",
        公司审核中: "warning",
        审核通过: "success",
        审核驳回: "danger",
        审核退回: "danger",
    };
    return statusMap[status] || "default";
};

// 根据优先级获取标签类型
const getPriorityTagType = (priority) => {
    const priorityMap = {
        高: "warning",
        中: "info",
        低: "success",
    };
    return priorityMap[priority] || "default";
};
</script>

<style scoped>
.el-table {
    @apply rounded-lg overflow-hidden;
}

.el-table__row:hover > td {
    @apply bg-blue-50/50;
}

.el-pagination {
    @apply pt-3;
}

.el-button--small {
    @apply px-2;
}
</style>
